<template>
  <div class="tm-storage">
    <el-row :gutter="20">
      <el-col span="24" class="mb20">
        <div class="tm-storage--header">当前位置: {{ current.group }} / {{ current.table }}</div>
      </el-col>
      <el-col span="8" class="tm-storage--aside">
        <el-tree
          :data="treeData"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick"
        ></el-tree>
      </el-col>
      <el-col span="16">
        <div class="tm-storage--body" v-if="current.group && current.table">
          <div class="tm-table--header">
            <div class="tm-table--btns">
              <el-button @click="addData">新增</el-button>
              <el-button type="primary" @click="exportData">导出</el-button>
              <el-button type="danger" @click="clearData">清空</el-button>
            </div>
            <div class="tm-table--search">
              <el-input type="text" class="mr10" v-model="tableProps.searchKeyword" placeholder="全字段搜索"></el-input>
              <!-- <el-button>搜索</el-button> -->
            </div>
          </div>
          <div class="tm-table--body mb10 mt10">
            <el-table :data="showTableData" border>
              <el-table-column type="index" label="No" width="50" :index="indexMethod" resizable>
              </el-table-column>
              <el-table-column
                :prop="col"
                :label="col"
                v-for="col in tableColumns"
                :key="col"
              ></el-table-column>
              <el-table-column label="操作" width="180" :index="indexMethod" resizable>
                <template v-slot="{ row }">
                  <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
                  <el-button type="danger" @click="handleDelete(row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="tm-table--footer">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="tableProps.page"
              :page-size.sync="tableProps.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length || 0"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import store from '../utils/tmStore'
const tables = {
  data() {
    return {
      tableData: [],
      tableProps: {
        searchKeyword: '',
        pageSize: 10,
        page: 1
      }
    }
  },
  computed: {
    showTableData() {
      let data = this.tableData
      let keyword = this.tableProps.searchKeyword
      if (keyword) {
        data = data.filter(function (item) {
          return Object.keys(item).some((key) => item[key].toString().includes(keyword))
        })
      }
      let start = (this.tableProps.page - 1) * this.tableProps.pageSize
      let end = this.tableProps.page * this.tableProps.pageSize
      return data.slice(start, end)
    },
    tableColumns() {
      let firstRow = this.tableData[0]
      if (firstRow) {
        return Object.keys(firstRow)
      }
      return []
    }
  },
  methods: {
    handleSizeChange() {},
    handleCurrentChange() {},
    indexMethod(index) {
      const { pageSize, page } = this.tableProps
      return (page - 1) * pageSize + index + 1
    }
  }
}
const tree = {
  methods: {
    handleNodeClick(data) {
      if (data.data) {
        this.tableData = data.data
        this.current.group = data.group
        this.current.table = data.label
      }
    }
  }
}
export default {
  name: 'TmStorage',
  mixins: [tables, tree],
  props: {},
  data() {
    return {
      current: {
        group: '',
        table: ''
      },
      treeData: [],
      tableData: []
    }
  },
  methods: {
    initData() {
      let basic = store.get('basic')
      let basicChildren = Object.keys(basic).map((label) => {
        return { label, group: 'basic', data: basic[label] }
      })
      this.treeData = [
        {
          label: 'basic',
          children: basicChildren
        },
        {
          label: 'table',
          children: []
        },
        {
          label: 'key-value',
          children: []
        }
      ]
    },
    addData() {
      if (this.current.group && this.current.table) {
        this.$modal
          .dialog('TmDataEditor', {
            props: {
              width: '60%',
              height: 400,
              title: '新增数据到' + this.current.group + '/' + this.current.table
            }
          })
          .once('confirm', (data) => {
            try {
              let _data = eval(data)
              store.add(this.current.group, this.current.table, _data)
            } catch (e) {
              console.error(e)
            }
          })
        // store.add(this.current.group, this.current.table, { name: '新任务', status: '执行中' })
      }
    },
    exportData() {
      // 选择导出的数据范围从第几条到第几条, 不填默认全部导出
    },
    clearData() {
      this.$confirm('确定要清空吗?', '提示').then(() => {
        store.clear(this.current.group, this.current.table)
        this.initData()
      })
    },
    handleEdit(row) {
      this.$modal.dialog(
        'TmDataEditor',
        {
          props: {
            width: '60%',
            height: 400,
            title: '修改数据'
          }
        },
        {
          props: {
            value: JSON.stringify(row, null, '  ')
          }
        }
      )
    },
    handleDelete(row) {
      this.$confirm('确定要删除吗?', '提示').then(() => {
        store.remove(this.current.group, this.current.table, row)
      })
    }
  },
  created() {
    this.initData()
  }
}
</script>
